<template>
	<view class="find">
		<!-- 导航栏组件 -->
		<tabbar-swiper :tabBars="tabBarInfo" @tabBar="tabBar" :swiperIndexInfo="swiperIndexInfo"></tabbar-swiper>
		<!-- 内容组件 -->
		<list :labelInfo="labelInfo" @swiperIndex="swiperIndex">
			<!-- 阅读组件 -->
			<template #read>
				<Read :labelInfo="labelInfo"></Read>
			</template>
			<!-- 图文组件 -->
			<template #imageText>
				<ImageText :labelInfo="labelInfo"></ImageText>
			</template>
			<!-- 问答组件 -->
			<template #answer>
				<Answer :labelInfo="labelInfo"></Answer>
			</template>
			<!-- 关注组件 -->
			<template #notes>
				<Notes :labelInfo="labelInfo"></Notes>
			</template>
		</list>
	</view>
</template>

<script>
	import cloudApi from '../../common/cloudApi.js'
	import TabbarSwiper from '../../components/tabbar-swiper/tabbar-swiper.vue'
	import List from '../../components/list/list.vue'
	import Read from './read/read.vue'
	import ImageText from './imageText/imageText.vue'
	import Answer from './answer/answer.vue'
	import Notes from './notes/notes.vue'
	export default {
		name: '',
		components: {
			TabbarSwiper,
			List,
			Read,
			ImageText,
			Answer,
			Notes
		},
		data() {
			return {
				//标签名
				tabBarInfo: [],
				//选中的标签名及其下标
				labelInfo: {},
				//滑动轮播当前下标
				swiperIndexInfo: 0
			}
		},
		methods: {
			//请求导航标签
			get_label() {
				console.log("请求得到导航栏");
				cloudApi.call({
					name: "label",
					success: (res) => {
						this.tabBarInfo = res.result.data
					}
				})
			},
			//子传父，传过来的数据
			tabBar(item) {
				console.log("导航栏子传父");
				console.log(item);
				this.labelInfo = item;
			},
			swiperIndex(item) {
				// this.labelInfo=item;
				this.swiperIndexInfo = item;
				console.log(item);
			}
		},
		onLoad() {
			this.get_label();
		}
	}
</script>

<style scoped lang="scss">
	.find {
		height: 100%;
		width: 100%;
	}
</style>
